<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="resource/style/css/elementui.css">

<script src="resource/js/vue2.js"></script>
<!-- 引入组件库 -->
<script src="resource/js/elementui.js"></script>

<body>
    <div id="app">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                </el-input>
                <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
                    :filter-node-method="filterNode" ref="tree">
                </el-tree>
            </el-aside>
            <el-container>
                <el-header style="text-align: center; font-size: 12px">
                    <el-form :inline="true" :model="filter" class="demo-form-inline">
                        <el-form-item label="期区">
                            <el-input v-model="filter.area" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="楼栋">
                            <el-input v-model="filter.building" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="层">
                            <el-input v-model="filter.floor" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="select">生成销控图</el-button>
                        </el-form-item>
                    </el-form>
                </el-header>
                <el-main>
                    <el-table :data="tableData" :show-header="false">
                        <el-table-column prop="estate0" label="房产0" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate1" label="房产1" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate2" label="房产2" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate3" label="房产3" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate4" label="房产4" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate5" label="房产5" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate6" label="房产6" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate7" label="房产7" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate8" label="房产8" min-width="10%">
                        </el-table-column>
                        <el-table-column prop="estate9" label="房产9" min-width="10%">
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            watch: {
                filterText(val) {
                    this.$refs.tree.filter(val);
                }
            },

            methods: {
                filterNode(value, data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                }
            },
            data() {
                return {
                    filter: {
                        area: '',
                        building: '',
                        floor: ''
                    },
                    filterText: '',
                    data: [{
                        id: 1,
                        label: '招商项目 1',
                        children: [{
                            id: 4,
                            label: '期区 1-1',
                        }]
                    }, {
                        id: 2,
                        label: '招商项目 2',
                        children: [{
                            id: 5,
                            label: '期区 2-1'
                        }, {
                            id: 6,
                            label: '期区 2-2'
                        }]
                    }, {
                        id: 3,
                        label: '招商项目 3',
                        children: [{
                            id: 7,
                            label: '期区 3-1'
                        }, {
                            id: 8,
                            label: '期区 3-2'
                        }]
                    }],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                    tableData: [{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    },{
                        estate0: '房产0',
                        estate1: '房产1',
                        estate2: '房产2',
                        estate3: '房产3',
                        estate4: '房产4',
                        estate5: '房产5',
                        estate6: '房产6',
                        estate7: '房产7',
                        estate8: '房产8',
                        estate9: '房产9',
                    }]
                };
            }
        })
    </script>
</body>

</html>